<template>
  <div id="container"></div>
</template>
<script setup>
import { Chart } from "@antv/g2";
import {onMounted} from 'vue'

// 准备数据
const data = [
  { genre: "Sports", sold: 275 },
  { genre: "Strategy", sold: 115 },
  { genre: "Action", sold: 120 },
  { genre: "Shooter", sold: 350 },
  { genre: "Other", sold: 150 }
];

onMounted(()=>{
// 初始化图表实例
const chart = new Chart({
  container: "container",
  theme:'classic'
});
// 声明可视化
chart
  .interval() // 创建一个 Interval 标记
  .data(data) // 绑定数据
  .encode("x", "genre") // 编码 x 通道
  .encode("y", "sold"); // 编码 y 通道

// 渲染可视化
chart.render();
})



</script>
<style scoped>
</style>
